import { Button, Collapse, CollapseProps, Space } from "antd";
import React, { useEffect, useState } from "react";
import { FileMainProps } from "@/types";
import { WebSocket } from "@/components/Configuration/FileProps/components/WebSocket.tsx";
import { Mqtt } from "@/components/Configuration/FileProps/components/Mqtt.tsx";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { ReactAceEditor } from "@/components/common/ReactAceEditor.tsx";
import { Http } from "@/components/Configuration/FileProps/components/Http.tsx";

export function Correspondence(props: FileMainProps) {
  const [showCodeEditor, setShowCodeEditor] = useState(false);

  useEffect(() => {
    props.getCanvasData();
  }, []);
  const panelStyle: React.CSSProperties = {
    borderRadius: 0,
  };

  const items: CollapseProps["items"] = [
    {
      key: "Websocket",
      label: "Websocket",
      children: <WebSocket {...props} />,
      style: panelStyle,
    },
    {
      key: "Mqtt",
      label: "Mqtt",
      children: <Mqtt {...props} />,
      style: panelStyle,
    },
    {
      key: "Http",
      label: "Http",
      children: <Http {...props} />,
      style: panelStyle,
    },
    {
      key: "Javascript",
      label: "消息处理Javascript",
      children: (
        <div style={{ padding: "10px" }}>
          <Space direction="vertical" className={"w-full"}>
            <FormRowCol label="消息处理">
              <Button onClick={() => setShowCodeEditor(true)}>编 辑</Button>
              <ReactAceEditor
                open={showCodeEditor}
                tip={`参考文档：<a target='_blank' style="color: #1890ff" href="https://doc.le5le.com/document/119620524#%E8%A7%A3%E6%9E%90%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%BC%E5%BC%8F%E6%95%B0%E6%8D%AE">解析自定义格式数据</a>`}
                onOk={(code) => {
                  setShowCodeEditor(false);
                  props.onStoreDataChange("socketCbJs", code);
                }}
                onCancel={() => setShowCodeEditor(false)}
                value={props.storeData.socketCbJs || ""}
              ></ReactAceEditor>
            </FormRowCol>
          </Space>
        </div>
      ),
      style: panelStyle,
    },
    /*{
      key: "VariableBindings",
      label: "变量绑定",
      children: (
        <div style={{ padding: "10px" }}>
          <Space direction="vertical">
            <FormRowCol label="绑定变量地址">
              <Input
                value={props.storeData.bindDataUrl}
                placeholder=""
                onChange={(e) => {
                  props.onStoreDataChange("bindDataUrl", e.target.value);
                }}
              />
            </FormRowCol>
          </Space>
        </div>
      ),
      style: panelStyle,
    },*/
  ];
  return (
    <>
      <Collapse
        style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
        items={items}
        defaultActiveKey={[
          "Websocket",
          "Javascript",
          "VariableBindings",
          "Mqtt",
          "Http",
        ]}
      />
    </>
  );
}
